<!doctype html>
<html>
	<head>
		<title>ch05_03</title>
		<link rel=stylesheet type="text/css" href="color.css">
		<script type="text/javascript">
			function onLoad() {
				var inputSpan = document.getElementById("inputSpan");
				inputSpan.style.display='none';
				
				if(typeof(Storage)=="undefined")
				{
					alert("Sorry!!你的浏览器不支持Web Storage");
				}else{
					if(localStorage.username){
						if(!localStorage.counter){
							localStorage.counter = 1;
						}else{
							localStorage.counter++;
						}
						var btn_login = document.getElementById("btn_login");
						btn_login.style.display='none';
						var show_LocalStorage = document.getElementById("show_LocalStorage");
						show_LocalStorage.innerHTML=window.localStorage.username+" 你好~这是你第"+localStorage.counter+"次来到我的网站~";
					}
					
					var btn_login = document.getElementById("btn_login");
					var btn_logout = document.getElementById("btn_logout");
					var btn_send = document.getElementById("btn_send");
					btn_login.addEventListener("click", login);
					btn_logout.addEventListener("click", clearLocalStorage);
					btn_send.addEventListener("click", sendok);
				}
			}
			function login(){
				var inputSpan = document.getElementById("inputSpan");
				inputSpan.style.display='';
			}
			function sendok(){
				var inputname = document.getElementById("inputname");
				localStorage.username=inputname.value;
				location.reload();
			}
			function clearLocalStorage(){
				window.localStorage.clear();
				var show_LocalStorage = document.getElementById("show_LocalStorage");
				show_LocalStorage.innerHTML="已成功注销!!";
				
				var btn_login = document.getElementById("btn_login");
				var inputSpan = document.getElementById("inputSpan");
				btn_login.style.display='';
				inputSpan.style.display='';
			}
		</script>
	</head>
	<body onload="onLoad()">
		<button id="btn_login">登陆</button>
		<button id="btn_logout">注销</button><br />
		<img src="images/welcom.jpg" width="300" height="200" /><br />
		<span id="inputSpan">
			请输入你的姓名：<input type="text" id="inputname" value="">
			<button id="btn_send">提交</button>
		</span><br />
		<div id="show_LocalStorage"></div><br />
	</body>
</html>